<template>
  <div class="container">
    <div class="user">
      <div class="user-main" @click="showUserSub()">
        <img class="avatar" :src="mzjShopInfo?mzjShopInfo.shop_avatar_url:''" />
        <div class="user-sub" v-if="userSubShow">
          <ul>
            <li>{{mzjShopInfo?mzjShopInfo.shop_name:''}}</li>
            <li @click="logout"><i class="iconfont">&#xe67e;</i>退出</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="scan">
      <div class="scan-btn">
        <button class="btn" @click="scan"><i class="iconfont">&#xe621;</i>扫一扫</button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import wx from 'weixin-js-sdk'
import md5 from 'js-md5'

import http from '../utils/http'
import api from '../utils/api'
import { ERR_OK } from '../utils/config'

export default {
  data () {
    return {
      userSubShow: false
    }
  },
  computed: {
    ...mapGetters([
      'mzjShopInfo'
    ])
  },
  methods: {
    showUserSub () {
      this.userSubShow = !this.userSubShow
    },
    logout () {
      this.setShopInfo('')
      localStorage.removeItem('mzjShopInfo')
      this.$router.replace({
        path: '/login'
      })
    },
    scan () {
      const that = this
      wx.ready(function () {
        wx.scanQRCode({
          needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果
          success: function (res) {
            const resJson = JSON.parse(res.resultStr)
            if (resJson.signature) {
              const voucherID = resJson.voucher
              const signature = resJson.signature
              const salt = md5(`voucher${voucherID}tokenmzj`)
              if (salt === signature) {
                // 签名校验通过
                that.setVoucherID(voucherID)
                that.$router.push({
                  path: '/voucher-verify'
                })
              } else {
                that.$vux.toast.show({
                  type: 'warn',
                  text: '数据验证错误'
                })
              }
            } else {
              that.$vux.toast.show({
                type: 'warn',
                text: '非法调用'
              })
            }
          }
        })
      })
    },
    ...mapMutations({
      setShopInfo: 'SET_MZJSHOPINFO',
      setVoucherID: 'SET_VOUCHERID'
    })
  },
  async created () {
    const url = window.location.href.split('#')[0]
    const params = {
      query: {
        url
      }
    }
    const sign = await http.post(api.signPackage, params)
    if (sign.status === ERR_OK) {
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: sign.data.appId, // 必填，公众号的唯一标识
        timestamp: sign.data.timestamp, // 必填，生成签名的时间戳
        nonceStr: sign.data.nonceStr, // 必填，生成签名的随机串
        signature: sign.data.signature, // 必填，签名，见附录1
        jsApiList: [
          'scanQRCode'
        ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../common/styles/mixins.styl'
.container
  width 100%
  height 100%
  background-color #f6f6f6
  display flex
  align-items center
  justify-content center
  .user
    position absolute
    top 0.6rem
    right 0.4rem
    .user-main
      position relative
      .avatar
        width 0.7rem
        height 0.7rem
        border-radius 50%
      .user-sub
        position absolute
        top 0.8rem
        right 0
        background-color #fff
        width 2.4rem
        box-shadow  0 0px 10px 0 rgba(167, 167, 167, 0.2)
        li
          padding 0 0.2rem
          position relative
          line-height 3
          color #a2a2a2
          ellipsis()
          -webkit-touch-callout none /* iOS Safari */
          -webkit-user-select none /* Chrome/Safari/Opera */
          -moz-user-select none /* Firefox */
          -ms-user-select none /* Internet Explorer/Edge */
          user-select none /* Non-prefixed version, currently */
          &:active
            background-color #f1f1f1
          &+li
            &::before
              setTopLine()
          .iconfont
            margin-right 0.2rem
  .scan
    width 86%
    margin 0 auto
    .scan-btn
      .btn
        width 100%
        height 0.96rem
        border-radius 0.48rem
        background-image -webkit-gradient(linear,0% 0%, 100% 100%, from(#FF9696), to(#FF4A8C))
        color: #fff
        box-shadow 0 4px 10px 0 rgba(255, 101, 177, 0.4)
        font-size 0.4rem
        letter-spacing 0.1rem
        padding-left 0.1rem
        -webkit-touch-callout none /* iOS Safari */
        -webkit-user-select none /* Chrome/Safari/Opera */
        -moz-user-select none /* Firefox */
        -ms-user-select none /* Internet Explorer/Edge */
        user-select none /* Non-prefixed version, currently */
        .iconfont
          font-size 0.48rem
          margin-right 0.2rem
</style>
